<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            display: flex;
            justify-content: center;
            color: #ec181e;
            font-size: 5vw;
            font-weight: 900;
            text-shadow: 0 6px 4px rgba(255, 100, 100, 0.6);
        }
    </style>
</head>

<body>
    <button onclick="showData()">点击我显示日期和时间</button>
    <p id="output"></p>
    <h1>new Date(<i>milliseconds</i>)</h1>

    <p> JavaScript将日期存储为自1970年1月1日世界标准时间00:00:00以来的毫秒数:</p>
    <p id="d1"></p>
    <h1>new Date(<i>dateString</i>)</h1>

    <p>new Date（<i> dateString </i>）从日期字符串创建新的日期对象：</p>
    <p id="d2"></p>
    <h1>new Date(<i>year, month, ...</i>)</h1>

    <p> 7个数字指定年，月，日，时，分，秒和毫秒（按此顺序）：</p>
    <p id="d3"></p>
    <div id="result">0000/00/00/00:00:00:000
    </div>
    <script>
        function showData() {
            let now = new Date();
            document.getElementById("output").innerHTML = now;
        }

        //创建日期对象的方法
        // new Date();
        // new Date(milliseconds);
        // new Date(dateString);
        // new Date(year,nonth,day,hours,minutes,seconds,milliseconds);
        let d = new Date(0); //时间戳的方法
        //懒得用
        document.getElementById("d1").innerHTML = d;
        let d2 = new Date("July 30 1992 18:30"); // 日期字符串方法
        document.getElementById("d2").innerHTML = d2;
        let d3 = new Date(2019, 0, 26, 10, 40, 30, 0); // 日期和 时间方法
        document.getElementById("d3").innerHTML = d3;
        //然后下面是好几种表示年月日的方法
        var dd = new Date();
        document.write(dd.getFullYear() + "年<br>");
        document.write(dd.getMonth() + "月<br>");
        document.write(dd.getDate() + "日<br>");
        document.write("星期" + dd.getDay() + "<br>");
        document.write(dd.getHours() + "小时<br>");
        document.write(dd.getMinutes() + "分钟<br>");
        document.write(dd.getSeconds() + "秒<br>");
        document.write(dd.getMilliseconds() + "毫秒<br>");
        document.write(dd.getTime() + "<br>");
        //用setFullYear.....可以修改日期

        //下面是制作时钟的方法

        var intervalID = setInterval(startTimer, 1);

        function startTimer() {
            var date = new Date();
            var x = document.getElementById("result");
            x.innerHTML = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + ":" + date.getMilliseconds();
        }
    </script>
</body>

</html>